<script setup lang="ts">
import { useSgesMAStore } from './MountainGesCalA.ts'
import Sges1 from './Sges1.vue'
import Sges2 from './Sges2.vue'
import Sges3 from './Sges3.vue'
import { ref } from 'vue'
import Canvas3D from './Create3D.vue'
import DisplayPanel from './DisplayPanel.vue'

const store = useSgesMAStore()

const activeDrawer = ref(false)
const clientWidth = ref(window.innerWidth)
const create3D = () => {
  activeDrawer.value = true
}

function persistData() {
  /**
   * 将当前组件的计算状态返回给调用者
   */
  let _ = JSON.stringify(store.$state)
  localStorage.setItem('storeSgesCalMA', _)
  return _
}

defineExpose({
  persistData
})
</script>

<template>
  <Sges1></Sges1>
  <Sges2></Sges2>
  <!--    <n-alert title="警告" type="warning" :hidden="calInfo.success" closable>-->
  <!--      {{ calInfo.msg }}-->
  <!--    </n-alert>-->
  <Sges3 :create3D="create3D"></Sges3>

  <n-drawer
    v-model:show="activeDrawer"
    :default-width="clientWidth"
    placement="right"
    class="bg-blue-100 w-full"
    resizable
  >
    <Canvas3D ref="canvas"></Canvas3D>
    <!-- 信息面板组件覆盖在画布上 -->
    <DisplayPanel/>
  </n-drawer>
</template>

<style scoped>

</style>